<script setup lang="ts">
import LocalUserImage from '@/assets/user-image.png'
import { getUserInfo } from '@/services/user'
import { type UserInfo } from '@/types/user'
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'

/**
 * 获取用户信息
 */
const userInfo = ref<UserInfo>()
onMounted(async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
})

/**
 * 快捷工具初始化数据
 */
const tools = [
  { label: '我的收藏', path: '/user/consult' },
  { label: '我的处方', path: '/' },
  { label: '家庭档案', path: '/user/patient' },
  { label: '地址管理', path: '/user/address' },
  { label: '我的评介', path: '/' },
  { label: '官方客服', path: '/' },
  { label: '设置', path: '/' }
]

/**
 * 退出登录
 */
const router = useRouter()
const handleLoginOut = async () => {
  await showConfirmDialog({
    title: '温馨提示',
    message: '您确认要退出优医问诊吗？'
  })

  const userStore = useUserStore()
  userStore.delUser()
  router.push({ path: '/login' })
}
</script>

<template>
  <div class="user-page">
    <div class="user-page-header">
      <div class="user-container">
        <van-image
          class="user-container__img"
          round
          lazy-load
          v-lazy="LocalUserImage"
          width="69"
          height="69"
          fit="cover"
          position="center"
          :src="userInfo?.avatar"
        >
        </van-image>
        <div class="user-container__user_basic">
          <van-cell :title="userInfo?.account" title-class="user-container__user_title">
            <template #label>
              <van-icon class="user-container__user_label" name="edit" />
            </template>
          </van-cell>
        </div>
      </div>
      <div class="user-other-container">
        <van-grid :border="false">
          <van-grid-item text="收藏">
            <template #icon
              ><span>{{ userInfo?.collectionNumber }}</span></template
            >
          </van-grid-item>
          <van-grid-item text="关注">
            <template #icon
              ><span>{{ userInfo?.likeNumber }}</span></template
            >
          </van-grid-item>
          <van-grid-item text="积分">
            <template #icon
              ><span>{{ userInfo?.score }}</span></template
            >
          </van-grid-item>
          <van-grid-item text="优惠券">
            <template #icon
              ><span>{{ userInfo?.couponNumber }}</span></template
            >
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="user-page-orders">
      <van-cell-group inset border>
        <van-cell :border="false" title="药品订单" value="全部房间" is-link> </van-cell>
        <van-grid :border="false">
          <van-grid-item text="待付款">
            <template #icon>
              <van-badge :content="userInfo?.orderInfo.paidNumber">
                <cp-icon name="user-paid"></cp-icon>
              </van-badge>
            </template>
          </van-grid-item>
          <van-grid-item text="待发货">
            <template #icon>
              <van-badge :content="userInfo?.orderInfo.receivedNumber">
                <cp-icon name="user-shipped"></cp-icon>
              </van-badge>
            </template>
          </van-grid-item>
          <van-grid-item text="待收货">
            <template #icon>
              <van-badge :content="userInfo?.orderInfo.shippedNumber">
                <cp-icon name="user-received"></cp-icon>
              </van-badge>
            </template>
          </van-grid-item>
          <van-grid-item text="已完成">
            <template #icon>
              <van-badge :content="userInfo?.orderInfo.finishedNumber">
                <cp-icon name="user-finished"></cp-icon>
              </van-badge>
            </template>
          </van-grid-item>
        </van-grid>
      </van-cell-group>
    </div>
    <div class="user-page-group">
      <van-cell-group inset :border="false">
        <van-cell title="快捷工具"></van-cell>
        <van-cell
          v-for="(item, index) in tools"
          :key="item.label"
          :border="false"
          :title="item.label"
          :to="item.path"
          is-link
        >
          <template #icon>
            <cp-icon :name="`user-tool-0${index + 1}`"></cp-icon>
          </template>
        </van-cell>
        <van-button
          block
          type="warning"
          native-type="button"
          class="login-out__btn"
          text="退出登录"
          @click="handleLoginOut"
        ></van-button>
      </van-cell-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user-page {
  background: linear-gradient(to bottom, #cce9e8 0%, #f6f7f9 40%);
  min-height: calc(100vh - 50px);

  &-header {
    .user-container {
      display: flex;
      align-items: center;
      padding: 25px;

      &__user_basic {
        :deep() {
          .user-container__user_title {
            font-size: 25px;
          }
          .user-container__user_label::before {
            color: var(--cp-primary) !important;
            font-size: 9px;
          }

          .van-cell {
            background-color: rgba(255, 255, 255, 0);
          }
        }
      }
    }

    .user-other-container {
      :deep() {
        .van-badge__wrapper {
          font-size: 18px;
          font-weight: 700;
          color: var(--cp-text1);
        }

        .van-grid-item__text {
          color: var(--cp-dark);
          font-size: 12px;
        }

        .van-grid-item__content {
          background-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }

  &-orders {
    .cp-icon {
      width: 28px;
      height: 28px;
    }

    :deep() {
      .van-cell {
        align-items: flex-end;
      }
      .van-grid-item__text {
        font-size: 12px;
      }

      .van-cell__title {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
  &-group {
    margin-top: 20px;
    .van-cell {
      align-items: center;

      .cp-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
